<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

// 导航到个人中心
const goToProfile = () => {
  router.push('/user/profile')
  $emit('close-menu')
}

// 导航到首页
const goToHome = () => {
  router.push('/')
  $emit('close-menu')
}

// 导航到分类页
const goToCategory = (category) => {
  router.push(`/category/${category}`)
  $emit('close-menu')
}

// 导航到会员中心
const goToMembership = () => {
  router.push('/membership')
  $emit('close-menu')
}
</script>

<template>
  <div class="mobile-menu">
    <nav class="mobile-nav-links">
      <a href="/" class="mobile-nav-link" @click.prevent="goToHome">首页</a>
      <a href="/category/action" class="mobile-nav-link" @click.prevent="goToCategory('action')">动作</a>
      <a href="/category/comedy" class="mobile-nav-link" @click.prevent="goToCategory('comedy')">喜剧</a>
      <a href="/category/drama" class="mobile-nav-link" @click.prevent="goToCategory('drama')">剧情</a>
      <a href="/category/scifi" class="mobile-nav-link" @click.prevent="goToCategory('scifi')">科幻</a>
      <a href="/user/profile" class="mobile-nav-link" @click.prevent="goToProfile">个人中心</a>
      <a href="/membership" class="mobile-nav-link" @click.prevent="goToMembership">会员中心</a>
    </nav>
  </div>
</template>

<style scoped>
/* 移动端菜单 */
.mobile-menu {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  background-color: var(--white);
  box-shadow: var(--shadow-md);
  z-index: 999;
  padding: 20px;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mobile-nav-link {
  font-size: 16px;
  padding: 8px 0;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
  transition: var(--transition);
}

.mobile-nav-link:last-child {
  border-bottom: none;
}

.mobile-nav-link:hover {
  color: var(--primary-color);
}
</style>